<template>
  <view class="user">
    <!-- 上方显示用户信息的区域 -->
    <view class="userinfo">
      <!-- 信息区域 -->
      <view class="top">
        <view class="avator">
          <uni-icons type="person-filled" size="30" 
            :color="logColor"></uni-icons>
        </view>
		<view class="uname" v-if="store.isLogin">
			<view>{{store.userInfo.username}}</view>
			<view>{{store.userInfo.phone}}</view>
		</view>
		
        <view class="uname" v-else @tap="toLogin">点击登录</view>
      </view>
    </view>
    <!-- 下方显示的四项用户操作项 -->
    <view class="list">
      <uni-list>
        <uni-list-item v-for="item,index in manageList"
          :title="item.name" :show-extra-icon="true"
          :extra-icon="item.icon" clickable link @tap="navto(index)" ></uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
	import { ref } from 'vue'
	import { userStore } from '../../store/userstore';
	let store=userStore()
	let logColor=ref("#ccc")
	let mystore=userStore()
	
	const manageList = ref([{
	//   name: '订单管理',
	//   icon: {
	//     color: '#56c48b',
	//     size: '22',
	//     type: 'shop'
	//   }
	// }, {
	//   name: '地址管理',
	//   icon: {
	//     color: '#ff6700',
	//     size: '22',
	//     type: 'location-filled'
	//   }
	// }, {
	  name: '我的收藏',
	  icon: {
	    color: '#0225ff',
	    size: '22',
	    type: 'star'
	  }
	}, {
	  name: '设置',
	  icon: {
	    color: '#0081b9',
	    size: '22',
	    type: 'gear'
	  }
	}])
	
	function navto(index){
		uni.showToast({
			title:`你点击的是${manageList.value[index].name}`
		})
	}
	function toLogin(){
			uni.navigateTo({
				url:"/pages/login/login"
			})
		}
</script>

<style lang="scss">
.user{
	// 设置页面高度
	height: calc(100vh - 95px);
	background-color: #f8f8f8;
	.userinfo{
		height: 200px;
		background-color: #ffab7e;
		.top{
			display: flex;
			align-items: center;
			position: absolute;
			left: 50px;
			top: 50px;
			.avator{
				width: 40px;
				height: 40px;
				background-color: $uni-bg-color-grey;
				border-radius: 50%;
				// text-align: center;
				// line-height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.uname{
				color: #fff;
				font-size: 16px ;
				padding-left: 5px;
			}
		}
	}
	.list{
		width: 710rpx;
		margin: 20rpx auto;
		
	}
}
</style>
